import React, { Component } from 'react';
import { Card, Tabs, Avatar, Icon, Divider, Tag, Row, Col } from 'antd';
const { TabPane } = Tabs;
import { userLogin, queryCurrentUser } from '@/services/userlogin';
// 自定义组件

import ApplicationPage from './component/application';
import ProjectPage from './component/project';
import styles from './index.less';

class UserWelcome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUser: '',
      userData: [],
    };
  }

  componentDidMount() {
    this.initialUser();
  }
  initialUser = async () => {
    const userName = localStorage.getItem('currentName');
    const id = localStorage.getItem('id');

    const res = await queryCurrentUser(id);
    if (res.code == 0) {
      this.setState({
        userData: res.data,
      });
    }

    this.setState({
      currentUser: userName,
    });
  };
  render() {
    const { currentUser, userData } = this.state;
    console.log(userData);
    return (
      <Row>
        {/**这里注意 xs等参数分别对应从小屏幕到大屏幕所占的栅格数 那么屏幕越小对应的数值就应该越大 */}
        <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ padding: '0 10px' }}>
          <Card>
            <div style={{ textAlign: 'center', marginBottom: '10px' }}>
              {/**头像，用户名称 */}
              <Avatar
                size="small"
                src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                style={{ width: '120px', height: '120px' }}
                alt="avatar"
              />

              <h2 style={{ marginTop: '10px' }}> {currentUser}</h2>
              <span style={{ fontSize: '10px' }}>{userData.slogan}</span>
            </div>
            {/**根据用户名获取信息 */}
            <div>
              <div style={{ padding: '10px 10px' }}>
                {' '}
                <span>
                  {' '}
                  <Icon type="audit" style={{ color: '#000', fontWeight: 'bold' }} />{' '}
                  <span style={{ paddingLeft: '10px', color: '#000', fontWeight: 'bold' }}>
                    职位信息:{' '}
                  </span>{' '}
                  <span style={{ marginLeft: '5px' }}>{userData.position}</span>{' '}
                </span>
              </div>
              <div style={{ padding: '10px 10px' }}>
                {' '}
                <span>
                  {' '}
                  <Icon type="book" style={{ color: '#000', fontWeight: 'bold' }} />{' '}
                  <span style={{ paddingLeft: '10px', color: '#000', fontWeight: 'bold' }}>
                    工作信息:{' '}
                  </span>{' '}
                  <span style={{ marginLeft: '5px' }}>{userData.company}</span>
                </span>
              </div>
              <div style={{ padding: '10px 10px' }}>
                {' '}
                <span>
                  {' '}
                  <Icon type="home" style={{ color: '#000', fontWeight: 'bold' }} />{' '}
                  <span style={{ paddingLeft: '10px', color: '#000', fontWeight: 'bold' }}>
                    当前住址:{' '}
                  </span>{' '}
                  <span style={{ marginLeft: '5px' }}>{userData.address}</span>
                </span>
              </div>
            </div>
            <Divider dashed />
            {/**个人标签 */}
            <div style={{ paddingLeft: '10px' }}>
              <h4>我的标签</h4>
              <div style={{ marginTop: '10px' }}>
                {' '}
                <Tag color="orange">爱学习</Tag>
                <Tag color="gold">热爱生活</Tag>
                <Tag color="blue">专心</Tag>
                <Tag color="lime">做一个小胖子</Tag>
                <Tag color="green">天天向上</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={24} lg={16} xl={16} style={{ padding: '0 10px' }}>
          <Card>
            <Tabs defaultActiveKey="3">
              <TabPane tab="文章" key="1">
                个人文章
              </TabPane>
              <TabPane tab="应用" key="2">
                <ApplicationPage></ApplicationPage>
              </TabPane>
              <TabPane tab="项目" key="3">
                <ProjectPage></ProjectPage>
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    );
  }
}

export default UserWelcome;
